<template>
    <m-page class="page-background">
        <m-header></m-header>
        <div class='transfer_homepage'>
            <div class="transfer_homepage__menu_back">
                <div class="transfer_homepage__menu">
                    <!-- 智能转账、手机号转账入口 -->
                    <div class="transfer_homepage__menu-top">
                        <div v-for="(item, index) in menu1" :key="index"
                            @click="gotoPage(item)">
                            <ynet-button class="transfer_homepage__menu-top-button" style="width: 1.86rem;height: 0.8rem;" :type="item.buttonType" round>{{ item.name }}</ynet-button>
                        </div>
                    </div>
                    <img class="transfer_homepage__record-item-arrow" :src="arrow">
                    <div class="transfer_homepage__menu-top">
                        <div v-for="(item, index) in menu2" :key="index"
                            @click="gotoPage(item)">
                            <ynet-button class="transfer_homepage__menu-top-button" style="width: 1.86rem;height: 0.8rem;" :type="item.buttonType" round>{{ item.name }}</ynet-button>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="ynet-input">
                    <label for class="ynet-input__title">收款户名</label>
                    <div class="ynet-input__box">
                        <input type="text" fastfocus="true" name="ynet-input"
                            class="ynet-input__box__input">
                    </div>
                    <slot name="rightIcon">
                        <img class="ynet-input__right-icon"
                            @click.stop="clickRightIcon" :src="rightIcon">
                    </slot>
                </div>
                <div class="ynet-input">
                    <label for class="ynet-input__title">收款账户</label>
                    <div class="ynet-input__box">
                        <input type="text" fastfocus="true" name="ynet-input"
                            class="ynet-input__box__input">
                    </div>
                    <slot name="rightIcon">
                        <img class="ynet-input__right-icon"
                            @click.stop="clickRightIcon" :src="rightIcon">
                    </slot>
                </div>
            </div>
            <div class="transfer_homepage__record">
                <div style="width: 90%;margin-bottom: 0.26rem;">
                    <ynet-button style="margin-left: 0.32rem;" type="warning">下一步</ynet-button>
                </div>
                <div>
                    <h2 class="transfer_homepage__record-title">历史转账</h2>
                </div>
                <div class="sameNameAccount" ref="headerList">
                    <!-- <div class="sameNameTitle" v-if="renderControl('SameNameList')">我的同名账户</div>
                    <ul class="sameNameContent">
                        <li class="content" v-for="(item,index) in sameNameList.slice(0,3)"
                            @click="recordDetail(item)" :key="'sameName'+index" v-show="item.recAccount">
                            <ynet-cell-account :rightArrow="false">
                                <img slot="icon" :src="recbankLogo(item)" class="icon"
                                    :onerror="defaultPng">
                                {{item.enlistBrhName}}&nbsp尾号&nbsp{{item.recAccount.slice(-4)}}
                            </ynet-cell-account>
                        </li>
                    </ul> -->
                    <!--同名的收起 relative定位-->
                    <!-- <div class="ynet_check-more" v-if="renderControl('haveSameNameCol')" ref="sameName">
                        <div class="ynet_check-more__more" @click="checkMore('sameName')">
                            <div class="ynet_check-more__more__content">
                                <p :class="moreSameName ? 'down' : 'up'">{{moreSameName?'收起':'查看更多'}}</p>
                            </div>
                        </div>
                    </div> -->
                </div>
                <!-- 最近联系人列表显示 -->
                <div class="transfer_homepage__record-item"
                    v-for="(item, index) in recentTransferList" :key="index"
                    @click="recordDetail(item)">
                    <div class="transfer_homepage__record-item-content">
                        <img class="transfer_homepage__record-item-img"
                            :src="getImg(item.oppAccountId)">
                        <div class="transfer_homepage__record-item-detail">
                            <p class="transfer_homepage__record-item-p1">{{
                                item.oppAccountName
                                }}</p>
                            <p class="transfer_homepage__record-item-p2">{{
                                item.oppPartyName }} 尾号{{ item.oppAccountNumber }}</p>
                        </div>
                    </div>
                    <img class="transfer_homepage__record-item-arrow" :src="arrow">
                </div>
                <!-- 没有最近联系人情况显示 -->
                <!-- <ynet-no-data describe="您最近没有转账" v-if="recentTransferList.length == 0">
                </ynet-no-data> -->
            </div>
        </div>
    </m-page>
</template>
<script>
    //import ynetNoData from '@cb/ynet_no_data';
    import { Button } from 'ynet-mobile'
    import { querySelfContacts, queryTopContactsNoSelf } from '../../request/index';
    export default {
        components: {
			[Button.name]: Button
		},
        data() {
            return {
                menu1: [
                    {
                        id: 'bankcard_transfer',
                        name: '银行卡转账',
                        buttonType: 'warning',
                        url: 'transfer/bankcard_transfer/index.html'
                    },
                    {
                        id: 'mobile_transfer',
                        name: '手机号转账',
                        buttonType: 'default',
                        url: 'transfer/mobile_transfer/index.html'
                    },
                    {
                        id: 'transfer_management',
                        name: '支付计划',
                        buttonType: 'default',
                        url: 'transfer/transfer_management/index.html'
                    },
                    
                ],
                menu2: [
                    {
                        id: 'transfer_record',
                        name: '转账记录',
                        buttonType: 'default',
                        url: 'transfer/transfer_record/index.html'
                    },
                    {
                        id: 'payee_roster',
                        name: '转账设置',
                        buttonType: 'default',
                        url: 'transfer/payee_roster/index.html'
                    },
                    {
                        id: 'payee_roster',
                        name: '转账说明',
                        buttonType: 'default',
                        url: 'transfer/payee_roster/index.html'
                    }
                ],
                recentTransferList: [
                    {
                        oppAccountId:'45566666',
                        oppAccountName: '长沙银行',
                        oppPartyName: '张三',
                        oppAccountNumber:'1263'                    
                    },
                    {
                        oppAccountId:'45566666',
                        oppAccountName: '长沙银行',
                        oppPartyName: '李四',
                        oppAccountNumber:'8888'                    
                    },
                    {
                        oppAccountId:'45566666',
                        oppAccountName: '长沙银行',
                        oppPartyName: '王二',
                        oppAccountNumber:'6666'                    
                    }
                ], //最近转账伙伴
                sameNameList:[
                    {
                        enlistBrhName: '长沙银行',
                        recAccount:'6666'                    
                    },
                    {
                        enlistBrhName: '长沙银行',
                        recAccount:'8888'                    
                    }
                ], //同名账户
                arrow: require('@assets/transfer/icon_right.png')
            };
        },
        created() {
            //app.api.confirm('ooooooo');

            this.querySelfContactsList();
            this.queryTopContactsNoSelfList();
        },
        methods: {
            /**
             * Frame
             * 本人的常用卡号查询
             * TODO
             */
            querySelfContactsList() {
                const _self = this;
                //接口上送参数
                let params = {};
                querySelfContacts(params)
                    .then(res => {
                        console.log(res);
                    })
                    .catch(err => {
                        console.log('======querySelfContacts=====');
                        console.log(err);
                    });
            },

            /**
             * Frame
             * 非本人常用联系人查询
             * TODO
             */
            queryTopContactsNoSelfList() {
                const _self = this;
                //接口上送参数
                let params = {};
                queryTopContactsNoSelf(params)
                    .then(res => {
                        console.log(res);
                    })
                    .catch(err => {
                        console.log('======queryTopContactsNoSelf=====');
                        console.log(err);
                    });
            },
            /**
             * Frame
             * 获取银行图标
             * TODO
             */
            getImg(bankNo) {
                //调用公共函数匹配对应的银行log图标，目前该函数尚未实现
                //return tools.getBankLogo(bankNo);
            },
            /**
             * Frame
             * 智能转账、手机号转账、支付计划、转账记录、转账设置页面跳转公共方法
             *  @item {Object} item.url 跳转路径
             * TODO
             */
            gotoPage(item) {
                console.log(item)
                //app.api.pushWindow(item.url);
                app.api.pushWindow('transfer/bankcard_transfer/index.html');
            },

            /**
             * Frame
             * 选择常用联系人跳转至转账录入页面
             *  @item {Object} item  联系人相关信息
             * TODO
             */
            recordDetail(item) {
                //保存联系人信息
                app.api.setSessionStorage('bankcard_transfer_payeeInfo', item);
                app.api.pushWindow('transfer/bankcard_transfer/index.html');
            }
        }
    };
</script>
<style lang='scss'>
    @import './index.scss';
</style>


